<template>
  <view class="bar-chart">
    <e-chart ref="vueref0" canvas-id="bar-canvas" />
  </view>
</template>

<script lang="js">
import Taro from "@tarojs/taro";
import { EChart } from 'echarts-taro3-vue'


export default {
  name: 'Bar',
  components: {
    EChart
  },
  data() {
    return {

    }
  },
  mounted () {
    let that = this;
    wx.request({
      url: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/obama_budget_proposal_2012.list.json',
      success(res) {
        // obama_budget_2012
        let obama_budget_2012 = res.data
        console.log('obama_budget_2012', obama_budget_2012)

       const defaultOption = {
      tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true
                }
            }
        },
         toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        legend: {
            data: ['Growth', 'Budget 2011', 'Budget 2012'],
            itemGap: 5
        },
        grid: {
            top: '12%',
            left: '1%',
            right: '10%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: obama_budget_2012.names
            }
        ],
         yAxis: [
            {
                type: 'value',
                name: 'Budget (million USD)',
                axisLabel: {
                    // formatter: function (a) {
                    //     a = +a;
                    //     return isFinite(a)
                    //         ? echarts.format.addCommas(+a / 1000)
                    //         : '';
                    // }
                }
            }
        ],
          dataZoom: [
            {
                show: true,
                start: 94,
                end: 100
            },
            {
                type: 'inside',
                start: 94,
                end: 100
            },
            {
                show: true,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 30,
                height: '80%',
                showDataShadow: false,
                left: '93%'
            }
        ],
        series: [
            {
                name: 'Budget 2011',
                type: 'bar',
                data: obama_budget_2012.budget2011List
            },
            {
                name: 'Budget 2012',
                type: 'bar',
                data: obama_budget_2012.budget2012List
            }
        ]
    }
    console.log('defaultOption', defaultOption)
    Taro.nextTick(() => {
      that.$refs.vueref0.refresh(defaultOption)
    })
      }
    })

  },
}
</script>

<style>
.bar-chart {
  width: 100%;
  height: 100vh;
}
</style>
